<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ baTable.form.operate !== "edit" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="baTable.onSubmit(formRef)"
          :model="baTable.form.items"
          label-position="right"
          :label-width="baTable.form.labelWidth + 'px'"
          :rules="rules"
          v-if="!baTable.form.loading"
        >
          <el-form-item label="设备编码" prop="equipmentCode">
            <el-input v-model="baTable.form.items!.equipmentCode" disabled />
          </el-form-item>
          <el-form-item label="选择时间" prop="endTime">
            <el-date-picker
              v-model="state.doTime"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="截止时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="getValue"
            />
          </el-form-item>
          <el-form-item label="优先级" prop="priority">
            <el-input
              v-model="baTable.form.items!.priority"
              type="number"
              placeholder="请输入优先级"
            ></el-input>
            <div class="block-help">0为最高级</div>
          </el-form-item>
          <el-form-item label="人员/班组" prop="person">
            <el-select
              v-model="baTable.form.items!.person"
              multiple
              placeholder="请选择人员/班组"
              @change="personChange"
            >
              <el-option
                v-for="item in state.UserDeptOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="排班方式" prop="classType">
            <el-select
              v-model="baTable.form.items!.classType"
              placeholder="请选择排班方式"
              @change="classTypeChange"
            >
              <el-option
                v-for="item in state.scheduleTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="班次" prop="classId">
            <el-select
              v-model="baTable.form.items!.classId"
              placeholder="请选择班次"
              @change="modelChange"
            >
              <el-option
                v-for="item in state.classesOptions"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item prop="equipmentType" label="设备型号">
              <el-input
                v-model="baTable.form.items!.equipmentType"
                type="string"
                placeholder="请输入设备型号"
              ></el-input>
            </el-form-item> -->
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div
        :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'"
      >
        <el-button @click="baTable.toggleForm('')">取消</el-button>
        <el-button
          v-blur
          :loading="baTable.form.submitLoading"
          @click="baTable.onSubmit(formRef)"
          type="primary"
        >
          {{ baTable.form.operate === "itemAdd" ? "确定并新增下一项" : "确定" }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import {
  reactive,
  ref,
  inject,
  onMounted,
  watch,
  computed,
  nextTick,
} from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules, ElTree } from "element-plus";
import { ElButton } from "element-plus";
import FormItem from "@/components/formItem/index.vue";
import { useConfig } from "@/store/config"; //后台布局相关仓库
import { changeBankToNumber } from "@/utils/common";
import { ElNotification } from "element-plus";

const formRef = ref<InstanceType<typeof ElForm>>();
const baTable = inject("baTable") as baTableClass;
const station = inject("station") as any;
const equipUnit = inject("equipUnit") as any;
const equipClass = inject("equipClass") as any;
const equipment = inject("equipment") as any;
const config = useConfig();
const treeRefIot = ref<InstanceType<typeof ElTree>>();
const filterTextIOT = ref(""); //网关

const state: {
  modelOptions: anyObj[];
  processOptions: anyObj[];
  classesOptions: anyObj[];
  scheduleTypeOptions: anyObj[];
  UserDeptOptions: anyObj[];
  doTime: any[];
  bank: boolean;
} = reactive({
  modelOptions: [], //设备类型列表
  processOptions: [], //工序列表
  classesOptions: [], //班次列表
  UserDeptOptions: [], //人员班组列表
  scheduleTypeOptions: [
    {
      value: "固定",
      label: "固定",
    },
    {
      value: "轮班",
      label: "轮班",
    },
  ], //排班方式列表
  bank: false,
  doTime: [],
});
const treeRef = ref<InstanceType<typeof ElTree>>();

const filterText = ref(""); //设备型号关键词过滤
const filterNode = (value: string, data: any) => {
  console.log(value, data);

  if (!value) return true;
  return data.modelCode.includes(value);
};

// 选择设备型号
const rightClick = (MouseEvent: any, object: any, Node: any, element: any) => {
  console.log("型号选择的数据", MouseEvent, object, Node, element);
  if (object.checkedKeys.length) {
    baTable.form.items!.equipmentName = MouseEvent.modelName;
    baTable.form.items!.equipmentType = MouseEvent.modelCode;
  } else {
    baTable.form.items!.equipmentName = "";
    baTable.form.items!.equipmentType = "";
  }
};

const rules = reactive<FormRules>({
  code: [{ required: true, message: "工作中心代码不能为空", trigger: "blur" }],
  name: [{ required: true, message: "车间名称不能为空", trigger: "blur" }],
  processCodes: [
    { required: true, message: "工序列表不能为空", trigger: "blur" },
  ],
  runTime: [
    { required: true, message: "额定运行时间不能为空", trigger: "blur" },
  ],
  equipmentCode: [
    { required: true, message: "设备编码不能为空", trigger: "blur" },
  ],
  equipmentName: [
    { required: true, message: "设备名称不能为空", trigger: "blur" },
  ],
  equipmentType: [
    { required: true, message: "设备型号不能为空", trigger: "blur" },
  ],
});

//针对侧边栏菜单高度让滚动条自适应
const overviewMenusScrollbarHeight = computed(() => {
  // 加上了50px的头部距离
  let menuTopBarHeight = 50;
  if (config.layout.layoutMode == "Default") {
    //32为aside上下margin
    return "calc(100vh - " + (172 + menuTopBarHeight) + "px)";
  } else {
    return "calc(100vh - " + (140 + menuTopBarHeight) + "px)";
  }
});

//班次选择
const modelChange = (val: any) => {
  baTable.form.items!.classId = val;
  console.log("班次", val);
};
//人员/班组选择
const personChange = (val: any) => {
  //   baTable.form.items!.classId = val;
  console.log("人员/班组选择", val);
};
//排班方式
const classTypeChange = (val: any) => {
  baTable.form.items!.classType = val;
  console.log("排班方式", val);
};

//选择时间
const getValue = (value: any) => {
  console.log("选择时间", value);
  if (value) {
    baTable.form.items!.startDate = value[0]; //只保留年月日
    baTable.form.items!.endDate = value[1]; //只保留年月日
  } else {
    baTable.form.items!.startDate = "";
    baTable.form.items!.endDate = "";
  }
};

onMounted(() => {
  //获取设备班次
  equipClass
    .getStationByRole({ pageSize: 1000 })
    .then((res: any) => {
      state.classesOptions = res.rows;
    })
    .catch((err: any) => {});
  //获取该设备的所在部门的人员

  setTimeout(() => {
    baTable.form.items!.equipmentCode = equipment.single.equipmentCode;
  });
});

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
watch(filterTextIOT, (val) => {
  treeRefIot.value!.filter(val);
});
</script>
<style lang="scss" scoped>
.filter-tree {
  height: 200px;
}
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
.vertical-menus-scrollbar {
  height: v-bind(overviewMenusScrollbarHeight);
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
